<!-- 历史快照-组织架构图 -->
<template>
  <div class="wrap">
    <nodeOrgChart
      @clickTree="clickTree"
      :data="originTreeData.data"
      :id="currId"
      style="margin-right: 10px"
    ></nodeOrgChart>
    <div class="main">
      <div class="top">
        <div class="left">
          <p style="width: 90px; display: flex; align-items: center">
            显示筛选：
          </p>
          <a-select
            @change="(e)=>changeShow(e as number[])"
            :default-value="[1, 2, 3, 4, 5]"
            size="medium"
            :max-tag-count="3"
            multiple
            :options="controlsShow.data"
          >
          </a-select>
        </div>
        <div class="icons">
          <div class="icon">
            <a-tooltip content="按ctrl+alt+鼠标滚轮向前或键盘+号放大">
              <IconFont type="icon-23fangda" size="22" @click="changeSize(1)" />
            </a-tooltip>
          </div>

          <div class="icon">
            <a-tooltip content="按ctrl+alt+鼠标滚轮向后或键盘-号缩小">
              <IconFont
                type="icon-24suoxiao"
                size="22"
                @click="changeSize(2)"
              />
            </a-tooltip>
          </div>
        </div>
      </div>
      <a-divider />
      <usersChart
        ref="chart"
        :data="clickTreeData.data || originTreeData.data"
        :style="{
          flex: 4
        }"
      ></usersChart>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { zoomWithMouse, zoomWithPlusAndMinus } from '@/utils/utils';
import nodeOrgChart from '../NodesOrgChart/index.vue';
import usersChart from '../UsersChart/index.vue';
import { GetOrganizationList } from '@/apis/management/organization/organizationManagement';
import type { treeDataType } from '@/views/Management/Organization/OrganizationManagement/StructurePic/type';

const title = '组织架构图';

const breadCrumb: string[] = ['组织', '基础设置', '组织架构图'];
const chart = ref();
const route = useRoute();

const props = withDefaults(
  // 参数说明
  defineProps<{
    id?: number;
    data: any; // 传进来的数据
  }>(),
  {
    data: []
  }
);
let currId = ref(0);

watch(
  () => props.id,
  (val: number) => {
    currId.value = val;
  },
  {
    immediate: true
  }
);
// watch(
//   () => route.query.id,
//   (val) => {
//     if (val && +val > 0) id.value = +val;
//     console.log(val);
//   }
// );
let snapVisible = ref(false); // 生成快照弹出框
const originTreeData = reactive<{ data: treeDataType }>({ data: {} });
const controlsShow = reactive({
  data: [
    {
      value: 1,
      label: '职位数',
      show: true
    },
    {
      value: 2,
      label: '员工数',
      show: true
    },
    {
      value: 3,
      label: '编制数',
      show: true
    },
    {
      value: 4,
      label: '负责人头像',
      show: true
    },
    {
      value: 5,
      label: '负责人职位',
      show: true
    }
  ]
});
const changeShow = (e: number[]) => {
  controlsShow.data.forEach((ele) => {
    if (e.indexOf(ele.value) === -1) {
      ele.show = false;
    } else {
      ele.show = true;
    }
  });
};
// 获取列表数据
const getData = async () => {
  try {
    // const data: any = await GetOrganizationList({ type: 1 });
    originTreeData.data = changeOriginTreeData(props.data[0])
      ? (changeOriginTreeData(props.data[0]) as treeDataType)
      : {};
    console.log(props.data[0], 'originTreeData.data');
  } catch (error: unknown) {
    console.log(error);
  }
};

watch(
  () => props.data,
  (newVal: any) => {
    console.log('🚀 ~ file: index.vue:153 ~ newVal:', newVal);

    if (newVal.length > 0) getData();
  }
);
// 处理初始化数据
const changeOriginTreeData = (data: any, level = 1): treeDataType | null => {
  if (!data) return null;
  const { ctlValue, children, id } = data;
  const newData: treeDataType = {
    btnShow: false,
    userShow: false,
    children: children ? ([] as any) : (void 0 as any)
  };
  newData.position = data.positionName;
  newData.userId = data.responsibleId;
  newData.personnel = data.personnel;
  newData.authorized = data.authorized;
  newData.position = data.position;
  newData.node = data.node;
  newData.id = id;
  newData.positionShow = controlsShow.data[0];
  newData.employeeShow = controlsShow.data[1];
  newData.establishmentShow = controlsShow.data[2];
  newData.avatarShow = controlsShow.data[3];
  newData.topPositionShow = controlsShow.data[4];
  newData.layout = true;
  newData.level = level;
  ctlValue.forEach((ele: any) => {
    // 组织名称
    if (ele.ctlCode === 'C30BBF36A5AF541F7A2657671DEE2EDD6') {
      newData.department = ele.ctlValue;
    }
    // 编制人数
    if (ele.ctlCode === 'CD25749DBA68E4BF3BCA616DD63751CB7') {
      newData.establishmentNum = ele.ctlValue;
    }
    // 组织负责人
    if (ele.ctlCode === 'CB0C63F38283045F58FFF1B1EABE5D151') {
      newData.name = ele.ctlValue;
    }
  });
  if (children && newData.children) {
    children.forEach((ele: any) => {
      const item = changeOriginTreeData(ele, level + 1);
      if (item) {
        newData.children?.push(item);
      }
    });
  }
  newData.name = data.responserName;
  return newData;
};

const clickTreeData = reactive({ data: null });
const clickTree = (e: any) => {
  clickTreeData.data = e;
};

const changeSize = (type: number) => {
  if (type === 1) {
    chart.value.enlarge();
  } else {
    chart.value.shrink();
  }
};

onMounted(() => {
  // 监听键盘ctrl+alt + 鼠标滚轮控制放大缩小事件
  document.addEventListener('wheel', function (event) {
    zoomWithMouse(event, chart.value.enlarge, chart.value.shrink);
  });

  // 监听键盘ctrl+alt + 键盘+ - 号控制放大缩小事件
  document.addEventListener('keydown', function (event) {
    zoomWithPlusAndMinus(event, chart.value.enlarge, chart.value.shrink);
  });
});
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
}
.icons {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #4a86ff;
  margin-right: 5px;
  div,
  button {
    margin-right: 10px;
  }
  div:nth-child(4) {
    margin-right: 0px;
  }
  .icon {
    cursor: pointer;
    padding: 5px 5px 0 5px;
    border: 1px solid #4a86ff;
  }
}
p {
  padding: 0;
  margin: 0;
}
.main {
  // width: 1440px;
  height: 622px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  .top {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    .left {
      min-width: 350px;
      display: flex;
      align-content: center;
    }
  }
}
</style>
